<template>
  <div class="cardBodys">
    <!-- 表格头部 操作按钮 -->
    <div class="table-header">
      <div class="header-button-lf">
        <el-button :icon="Plus" type="primary" plain @click="AddTask">
          新建客户
        </el-button>
      </div>
    </div>

    <div class="tablesd">
      <TablePro
        class="tables"
        :tableData="tableData"
        :tablesColumn="settingColumn"
      >
        <el-table-column
          fixed="right"
          label="操作"
          width="300px"
          align="center"
        >
          <template #default="scope">
            <el-button
              type="primary"
              link
              :icon="PieChart"
              @click="toBots(scope.row)"
            >
              机器人分配
            </el-button>
            <el-button type="primary" link :icon="User" @click="toUser(scope.row)"> 用户管理 </el-button>
          </template>
        </el-table-column>
      </TablePro>
    </div>
    <!-- 分页组件 -->
    <div class="pagination">
      <Pagination
        :pageTotal="pageable.total"
        :current="pageable.pageindex"
        :pageSize="pageable.pagesize"
        @currentChange="currentChange"
        @sizeChange="sizeChange"
      >
      </Pagination>
    </div>
  </div>

  <AddCompany ref="AddCompanyRef" />
  <Bots ref="BotsRef" />
  <UserM ref="UserMRef" />
</template>

<script setup lang="tsx" name="home">
import AddCompany from "./addCompany/adds.vue";
import Bots from "./bots/bots.vue";
import UserM from "./user/user.vue";
import { Plus } from "@element-plus/icons-vue";
import TablePro from "@/components/TablePro/index.vue";
import Pagination from "@/components/Pagination/Pagination.vue";
import { onMounted, reactive, ref } from "vue";
import { computed } from "vue";
import { gettaskinfoApi, getcustomerApi } from "@/api/modules/login";
import {
  User,
  Setting,
  Upload,
  RefreshRight,
  View,
  PieChart,
  Search,
} from "@element-plus/icons-vue";
// import AddCrowdTask from "../../component/addCrowdTask/index.vue";
import { ElMessage } from "element-plus";
const emit = defineEmits(["refresh"]);
const tableData = ref<any>([]);
const childBorder = ref(true);
const AddCompanyRef = ref();
const BotsRef = ref();
const UserMRef = ref();
const addCrowdTaskRef = ref<any>(null);
const pageable = ref({
  //分页数据
  pageindex: 1, //当前页数
  pagesize: 20, //每页显示条数
  total: 0, //总条数
  keyword: "",
});

const wx = ref<any>({ task_status: "" });
// watch(
//   () => props.isChangeInfo,
//   () => {
//     nextTick(() => {
//       wx.value = props.isChangeInfo;
//       console.log("公海");
//       search();
//     });
//   }
// );

const settingColumn = reactive<any>([
  {
    isShow: true,
    isSort: true,
    label: "公司名称",
    prop: "company",
    render: (scope: any) => {
      return <>{scope.row.company == "" ? "--" : scope.row.company}</>;
    },
  },
  {
    isShow: true,
    isSort: true,
    label: "联系人姓名",
    // width:'50',
    prop: "contacts",
    render: (scope: any) => {
      return <>{scope.row.contacts == "" ? "--" : scope.row.contacts}</>;
    },
  },

  {
    isShow: true,
    isSort: true,
    label: "联系人电话",
    // width:'50',
    prop: "phone",
    render: (scope: any) => {
      return <>{scope.row.phone == "" ? "--" : scope.row.phone}</>;
    },
  },

  {
    isShow: true,
    isSort: true,
    label: "套餐",
    // width:'50',
    prop: "type",
    render: (scope: any) => {
      return <>{scope.row.type == "" ? "--" : scope.row.type}</>;
    },
  },

  {
    isShow: true,
    isSort: true,
    label: "营业执照",
    prop: "certificate",
    width: 120,
    render: (scope: any) => {
      return (
        <>
          <div class="head" v-show={scope.row.certificate != ""}>
            <img class="imgs" src={scope.row.certificate} alt="" />
          </div>

          <div v-show={scope.row.certificate == ""}>--</div>
        </>
      );
    },
  },

  {
    isShow: true,
    isSort: true,
    label: "到期时间",
    prop: "date2",
  },
]);
const pageParam = computed({
  get: () => {
    return {
      pageindex: pageable.value.pageindex,
      pagesize: pageable.value.pagesize,
    };
  },
  set: (_newVal: any) => {},
});
// const search = async () => {
//   try {
//     const param = {
//       keyword: wx.value.wxnum, //某一个微信号
//       ...pageParam.value,
//     };
//     const res: any = await gettaskinfoApi(param);
//     // console.log("res", res);
//     tableData.value = res.data;
//     pageable.value.total = res.totalCount;
//   } catch (error) {
//     ElMessage.warning("查询失败,请检查网络或联系管理人员");
//   }
// };

// const starTask = async () => {
//   const par = {
//     wxnum: [wx.value.wxnum],
//     status: wx.value.task_status == 1 ? -1 : 1,
//     type: 6,
//   };
//   try {
//     const res: any = await setwxstatusApi(par);
//     console.log("res", res);
//     if (res.code == 200) {
//       ElMessage.success(
//         `${wx.value.task_status == 1 ? "暂停任务成功" : "开启任务成功"}`
//       );
//       emit("refresh");
//       if (wx.value.task_status == 1) {
//         wx.value.task_status = -1;
//       } else {
//         wx.value.task_status = 1;
//       }
//       search();
//     }
//   } catch (error) {}

//   // if (isStart.value) {
//   //   isStart.value = !isStart.value;
//   // }
//   // const par = {
//   //   isStart: isStart.value,
//   //   getList: search
//   // };
//   // ChooseWxRef.value?.acceptParams(par);
// };

const toBots = (data: any) => {
  console.log("data", data);
  const params = {
    title: "机器人分配",
    getTableList: getbatchmsg,
    data: data,
  };
  BotsRef.value?.acceptParams(params);
};


const toUser = (data: any) => {
  console.log("data", data);
  const params = {
    title: "用户管理",
    getTableList: getbatchmsg,
    data: data,
  };
  UserMRef.value?.acceptParams(params);
};
const AddTask = () => {
  const params = {
    title: "新增客户",
    getTableList: getbatchmsg,
  };
  AddCompanyRef.value?.acceptParams(params);
  // dialogRef.value?.acceptParams(params);
};

/**
 * @description 每页显示几条数发生改变
 */
const sizeChange = (val: number) => {
  pageable.value.pageindex = 1;
  pageable.value.pagesize = val;
  // search();
  getbatchmsg();
};
/**
 * @description 每页条数改变
 * @param {Number} val 当前条数
 * @return void
 * */
const currentChange = (val: number) => {
  pageable.value.pageindex = val;
  const param = { ...pageParam.value };
  getbatchmsg();
};
const getbatchmsg = async () => {
  const res: any = await getcustomerApi(pageable.value);
  if (res.code == 200) {
    console.log("数据", res.data);
    tableData.value = res.data;
    pageable.value.total = res.rowscount;
  } else {
    ElMessage.warning("查询失败,请检查网络或联系管理人员");
  }
};
onMounted(() => {
  // search();
  getbatchmsg();
});
</script>
<style scoped lang="less">
@import "./index.less";
</style>
